<!DOCTYPE html>

<html>

<head>
    <title></title>
    <script src='../vue.js'></script>
</head>

<body>
    <div id="app-8">
        <ul>
            <li v-for="todo in todos" v-if="!todo.isComplete">
                {{ todo.msg }}
            </li>
        </ul>
        <ul v-if="shouldRenderTodos">
            <li v-for="todo in todos">
                {{ todo.msg }}
            </li>
        </ul>
    </div>
    <script>
        var app8 = new Vue({
            el: '#app-8',
            data: {
                todos: [{
                        isComplete: false,
                        msg: 'msg1'
                    },
                    {
                        isComplete: false,
                        msg: 'msg2'
                    },
                    {
                        isComplete: false,
                        msg: 'msg3'
                    },
                    {
                        isComplete: true,
                        msg: 'msg4'
                    },
                ],
                shouldRenderTodos: true
            }
        })
    </script>
</body>


</html>